
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
<%--    投票统计--%>
    <script type="text/javascript"  src="../zeus-static/js/echarts.min.js"></script>
    <script type="text/javascript"  src="../zeus-static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        window.onload=function (){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            var myChart1 = echarts.init(document.getElementById('main1'));
            var myChart2 = echarts.init(document.getElementById('main2'));
            var myChart3 = echarts.init(document.getElementById('main3'));

            // 指定图表的配置项和数据
            //第一张表
            var option = {
                title: {
                    text: '投票人数地区统计',
                    subtext: '纯属虚构',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            {value: 1048, name: '北京'},
                            {value: 735, name: '上海'},
                            {value: 580, name: '江西'},
                            {value: 484, name: '湖南'},
                            {value: 300, name: '广州'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            //第二张表
            var option1 = {
                title: {
                    text: '那里得知有此投票',
                    subtext: '纯属虚构',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            {value: 1048, name: '搜索引擎'},
                            {value: 735, name: '路径访问'},
                            {value: 580, name: '朋友得知'},
                            {value: 484, name: '机缘巧合'},
                            {value: 300, name: '视频广告'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            //第三张表
            $.post("/echarts/ajax_vote3", function (result){
                var option2 = {
                    title: {
                        text: '平均年龄'
                    },
                    tooltip: {},
                    legend: {
                        data:['人数']
                    },
                    xAxis: {
                        data: result.age,
                    },
                    yAxis: {},
                    series: [{
                        name: '人数',
                        type: 'bar',
                        data: result.total,
                    }]
                };
                myChart2.setOption(option2);
            },"JSON");
            //第四张表
            $.post("/echarts/ajax_vote4", function (result) {
                var option3 = {
                    // backgroundColor:'#2c343c',
                    title: {
                        text: '投票高校统计'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: result.attitude,
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: result.school,
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '满意',
                            type: 'line',
                            stack: '总量',
                            data: [120, 132, 101, 134, 90, 230]
                        },
                        {
                            name: '特别烦',
                            type: 'line',
                            stack: '总量',
                            data: [220, 182, 191, 234, 290, 330]
                        },
                        {
                            name: '很烦',
                            type: 'line',
                            stack: '总量',
                            data: [150, 232, 201, 154, 190, 330]
                        },
                        {
                            name: '不满意',
                            type: 'line',
                            stack: '总量',
                            data: [320, 332, 301, 334, 390, 330]
                        },
                        {
                            name: '很来火',
                            type: 'line',
                            stack: '总量',
                            data: [820, 932, 901, 934, 1290, 1330]
                        }
                    ]
                };
                myChart3.setOption(option3);
            }, "JSON");

            // 使用刚指定的配置项和数据显示图表,留下两个不用ajax传数据的
            myChart.setOption(option);
            myChart1.setOption(option1);

        }

    </script>
</head>
<body>
<div id="main" style="width: 600px;height:400px; position: relative;left: 100px;top: 50px"></div>
<div id="main1" style="width: 600px;height:400px; position:relative;left: 900px;bottom: 370px;"></div>
<div id="main2" style="width: 600px;height:400px; position: relative;left: 100px;top: -280px;"></div>
<div id="main3" style="width: 600px;height:400px; position:relative;left: 900px;top: -700px;"></div>
</body>
</html>
